<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="../css/Carefree_first_page.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../layui/layui.js"></script>

</head>

<body>
  <div id="head">
    <div class="layui-col-md2">
      <div class="grid-demo">logo</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="../head_page/Carefree_first_page.html" class="head-color">首页</a></div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="../vehicle/vehicle_screening.html" class="head-hover word-1">自驾租车</a>
      </div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="../long_time_older/long_time.html" class="head-hover word-1">长租专区</a>
      </div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="../Offline_outlets/Car-search.html" class="head-hover word-1">车型查询</a>
      </div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="../Offline_outlets/Business_outlets.html"
          class="head-hover word-1">营业网点</a></div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo head-demo"><a href="" class="head-hover word-1">会员专区</a></div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo head-demo1">
        <i class="login-icon"></i>
        <a href="../login/login.html" class=" head-color">登录/注册</a>
      </div>
      <div class="tel">
        <i class="tel-icon"></i>
        <span class="tel-num">110-119-1111</span>
      </div>
    </div>
  </div>


  <div class="pho-pop">

    <div class="layui-carousel" id="test10">
      <div carousel-item="">
        <div class="test1"><img src="../images/wuyou.jpg" class="pho-size"></div>
        <div class="test1"><img src="../images/wuyou1.jpg" class="pho-size"></div>
        <div class="test1"><img src="../images/wuyou2.jpg" class="pho-size"></div>
        <div class="test1"><img src="../images/wuyou3.jpg" class="pho-size"></div>
        <div class="test1"><img src="../images/wuyou6.jpg" class="pho-size"></div>
      </div>
      <script src="../js/Carousel.js"></script>
    </div>

  </div>
  <div class="search">
    <div class="search-demo">
      <div class="grid-demo">
        <div class="box">
          <div class="place">
            <span>苏州</span>
          </div>
          <input class="choice" placeholder="选择取车门店" />
        </div>
      </div>
    </div>
    <div class="search-demo">
      <div class="grid-demo">
        <div class="box">
          <div class="layui-form">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label length">请选择范围</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" id="test16">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../js/first_time.js"></script>

    <div class="search-demo1">
      <div class="grid-demo">
        <div class="sele-car">
          <span><a href="" class="sele-col">立即选车</a></span>
        </div>
      </div>
    </div>
  </div>

  <div class="hot">
    <div class="hot-reco">热门车型推荐</div>
    <div class="hot-reco hot-reco1">精选无忧用户推荐的热门车型</div>
    <div class="hot-all">
      <div class="pho-max">
        <img class="pho-type" src="../images/img_11.jpg">

      </div>
      <div class="pho">
        <img class="pho-type" src="../images/img_20.jpg">
        <div class="score"></div>
      </div>
      <div class="pho">
        <img class="pho-type" src="../images/img_07.jpg">
        <div class="score"></div>
      </div>


      <div class="pho">
        <img class="pho-type" src="../images/img_09.jpg">
        <div class="score"></div>
      </div>
      <div class="pho">
        <img class="pho-type" src="../images/img_08.jpg">
        <div class="score"></div>
      </div>
    </div>
  </div>
  <div class="place-cut">
    <div class="qa">租车Q&A</div>
    <span class="great">每一个阶段,都值得留下美好时刻</span>
    <div class="qa-content">
      <div class="qa-content-item">
        <div class="car-item">
          <div class="car-i1">
            <div class="car-icon">Q1</div>
            <div class="car-i2">租车需要哪些证件？</div>
          </div>
          <div class="car-content">
            <div class="answer">身份证:大陆用户驾驶员二代身份证,年满18周岁,有效期需 超过当次租期一个月以上。</div>
            <div class="answer">驾驶证：本人国内有效驾驶证（正副本），有效期需超过当次租期一个月以上。</div>
            <div class="answer">港澳台客户准备澳港内地通行证或台湾居民来往大陆通行证，有效期超过当次租期两个月以上。</div>
            <div class="answer">外籍客户提供护照，有效期超过当次租期两个月以上。</div>
          </div>
        </div>
        <div class="car-item1">
          <div class="car-i1">
            <div class="car-icon">Q4</div>
            <div class="car-i2">可以开哪些发票?</div>
          </div>
          <div class="answer">国内租订单还车结算后以订单为单位，为您开具增值税发票；支持电子发票和纸质发票。</div>
        </div>

      </div>
      <div class="qa-content-item">
        <div class="car-item2">
          <div class="car-i1">
            <div class="car-icon">Q2</div>
            <div class="car-i2">有哪些网络预订方式？</div>
          </div>
          <div class="answer">App:通过应用市场下载无忧租车App进行预订。</div>
          <div class="answer">小程序：在微信和支付宝平台搜索“无忧租车”关键词找到小程序进行预订。</div>
          <div class="answer">触屏版:浏览器中输入m.zuche.com预订。</div>
        </div>
        <div class="car-item3">
          <div class="car-i1">
            <div class="car-icon">Q5</div>
            <div class="car-i2">租车费用有哪些？</div>
          </div>
          <div class="answer">必缴费用包括：车辆租赁及服务费、基础服务费、车辆整备费共三项。</div>
          <div class="answer">其他费用包括：送车上门服务费、上门取车服务费、跨网点还车服务费、异地还车服务费、加油服务费、超时服务费等。</div>
        </div>
      </div>

      <div class="qa-content-item">
        <div class="car-item4">
          <div class="car-i1">
            <div class="car-icon">Q3</div>
            <div class="car-i2">有哪些预订流程？</div>
          </div>
          <div class="answer">只需四步即可完成预订。</div>
          <div class="answer">第1步:确定需要取还的地址和时间。</div>
          <div class="answer">第2步:选择取还的网点和车型。</div>
          <div class="answer">第3步:选择承租人。</div>
          <div class="answer">第4步:订单确认，完成预订。</div>
        </div>
        <div class="car-item5">
          <div class="car-i1">
            <div class="car-icon">Q6</div>
            <div class="car-i2">可以选择哪些出行保障？</div>

          </div>
          <div class="answer">我们已为您提供基础服务保障，同时您也可以购买尊享服务、尊享百万服务、尊享驾乘守护和全程无忧，让您的出行更安心。</div>
        </div>
      </div>
    </div>
  </div>
  <div class="reco">
    <div class="reco-main">
      <span>推荐出行方案</span>
      <span class="nice">每一个阶段,都值得留下美好时刻</span>
      <div class="all">
        <div class="zijia">
          <img src="../images/reco.png" class="reco-item">
        </div>
        <div class="zonghe"><img src="../images/tanqin.png" class="reco-item"></div>
        <div class="zonghe"><img src="../images/shangwu.png" class="reco-item"></div>
        <div class="zonghe"><img src="../images/youwan.png" class="reco-item"></div>
        <div class="zonghe"><img src="../images/tanqin.png" class="reco-item"></div>
      </div>
    </div>
  </div>



  <!-- 地图 -->
  <div class="map-container">
  <span>营业网点</span>
  <span class="nice">全国好多好多+服务网点为您提供安全出行服务</span>
  <div class="map" id="container"> </div>
</div>
  
 





  <div id="sticky-note">
    <div class="layui-col-md3">
      <div class="grid-demo note1">
        <div>
          <ul>
            <li class="note-o">VIP俱乐部</li>
            <li class="note-o1">110-119-1111</li>
            <li class="note-o2">让你享受帝王般的服务</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo note2">
        <ul>
          <li class="note-o">双信用免押租车</li>
          <li class="note-o1">芝麻分满600以上</li>
          <li class="note-o2">支付宝芝麻分600分以上,即可享免押金租车</li>
        </ul>
      </div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo note3">
        <ul>
          <li class="note-o">支持自助取还车</li>
          <li class="note-o1">全苏州超多自助取还点</li>
          <li class="note-o2">全程无接触,又快又安全</li>
        </ul>
      </div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo note4">
        <ul>
          <li class="note-o">全程安全保障</li>
          <li class="note-o1">优选多种方案保障出行</li>
          <li class="note-o2">让您用车途中不用担心突发情况</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-box">
      <div class="footer-left">
        <p>
          <span>关于无忧</span> |
          <span>移动客户端</span> |
          <span>帮助中心</span> |
          <span>建议专区</span> |
          <span>联系我们</span> |
          <span>友情连接</span> |
          <span>投诉通道：400-821-1608</span>
        </p>
        <p>
          <span>Copyright © 2007-2022 苏州无忧信息技术服务有限公司 ICP证：苏B2-20140130|苏ICP备08010394号-1</span>
        </p>
      </div>
      <div class="footer-right"></div>
    </div>
  </div>


  <!-- 地图js -->
  <script src="https://webapi.amap.com/maps?v=2.0&key=15a7063e08f355fead69e0defdff2c0f"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //创建地图
    var map = new AMap.Map('container', {
      zoom: 10,
      center: [120.693023,31.344858, 120.552981,31.294564],
      showIndoorMap: true
    });

    //显示当前地图边界范围坐标
    function logMapBounds() {
      var bounds = map.getBounds();
      document.querySelector("#ne").innerText = bounds.northEast.toString();
      document.querySelector("#sw").innerText = bounds.southWest.toString();
    }

    logMapBounds();

    //绑定地图移动与缩放事件
    map.on('moveend', logMapBounds);
    map.on('zoomend', logMapBounds);

    //绑定按钮事件
    document.querySelector("#reset-bounds").onclick = function() {
      //通过 new AMap.Bounds(southWest:LngLat, northEast:LngLat) 或者 map.getBounds() 获得地图Bounds信息
      var mybounds = new AMap.Bounds([120.643545,31.34102], [120.558387,31.291307]);
      map.setBounds(mybounds);
    }
  </script>

</body>

</html>